<template>
  <div class="tool-bar-box">
      <a-button 
        size="small"
        @click="generateJson"
        class="tool-bar-box-item"
      >
        <template #icon>
          <FileTextOutlined />
        </template>
        生成JSON
      </a-button>
      <a-button 
        size="small"
        @click="formSetting"
        class="tool-bar-box-item"
      >
        <template #icon>
          <FileTextOutlined />
        </template>
        表单配置
      </a-button>
  </div>
  <!-- 生成JSON弹窗 -->
  <a-modal v-model:open="open" title="生成JSON" @ok="handleOk">
    <CodeEditor v-model:value="jsonEg" language="json" />
  </a-modal>
</template>

<script>
import { FileTextOutlined } from '@ant-design/icons-vue';
import CodeEditor from './CodeEditor.vue'

export default {
  name: 'NaiveHeader',
  components: {
    FileTextOutlined,
    CodeEditor
  },
  computed:{
    jsonEg(){
      return JSON.stringify(this.widgetForm, null, 2)
    } 
  },
  props:{
    widgetForm:{
      type: Object,
      required: true
    }
  },
  data(){
    return {
      open: false
    }
  },
  methods:{
    generateJson(){
      console.log(this.widgetForm)
      this.open = true
    },
    handleOk(e){
      this.open = false
    },
    formSetting(){
      this.$emit("update:configTab",'form')
    }
  }
}
</script>

<style lang="scss" scoped>

</style>